<template>
  <div v-if="question">
    <el-form label-width="60px" size="mini">
      <edit-common-module :question="question"></edit-common-module>
      <el-form-item label="样式：">
        <el-radio-group v-model="question.style">
          <el-radio label="h">横向</el-radio>
          <el-radio label="v">纵向</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选项：">
        <span class="btn-icon"><icon @click.native="showAddDialog" name="plus" scale="1.2"></icon></span>
        <!-- 显示选项 -->
        <el-radio-group v-model="checkedValue" style="display: block">
        <div class="option-container" v-for="option of question.options" :key="option.key">
            <el-radio :label="option.key">{{option.text}}</el-radio>
            <div class="option-control">
              <edit-option-control
                :option="option"
                v-on:edit="editOption"
                v-on:move="moveOption"
                v-on:remove="removeOption"></edit-option-control>
            </div>
        </div>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="关联：">
        <el-row>
          <!-- 显示已经关联的数据 -->
          <div v-if="question.refs && question.refs.length>0">
            <el-table
              :header-cell-style="headerCellStyle"
              :data="question.refs">
              <el-table-column
                label="选项">
                <template slot-scope="scope">
                  {{scope.row.option}}
                </template>
              </el-table-column>
              <el-table-column
                label="关联项">
                <template slot-scope="scope">
                  {{scope.row.refs.join(',')}}
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="80">
                <template slot-scope="scope">
                  <el-button
                    size="small"
                    type="text"
                    @click.native.prevent="btnDeleteRef(scope.$index)"
                  >移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-row>
        <el-row v-if="checkedValue">
          <el-select v-model="selRef" multiple placeholder="请选择">
            <el-option-group>
              <el-option v-for="refQ in refQuestions" :key="refQ.key" :label="refQ.topic" :value="refQ.key"></el-option>
            </el-option-group>
            <el-option-group>
              <el-option label="不可选" style="display:none;" disabled value="-1"></el-option>
              <div style="position: relative;width:100%;height:24px;">
                <div style="margin:0 auto;width:28px;opacity: 0.6;cursor: pointer;">
                  <icon @click.native="showCreateRefSection" name="plus" scale="1.2"></icon>
                </div>
              </div>
            </el-option-group>
          </el-select>
          <span class="btn-icon-mini"><icon @click.native="btnAddRef" name="plus" scale="1.2"></icon></span>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="添加新选项" :visible.sync="showAddOption">
      <el-form v-if="addForm" label-width="60px" size="mini">
        <el-form-item label="类型：">
          <el-radio-group v-model="addForm.type">
            <el-radio label="normal">普通</el-radio>
            <el-radio label="editable">可编辑</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选项：">
          <el-input v-model="addForm.text"></el-input>
        </el-form-item>
        <el-form-item label="策略：" v-if="tactics">
          <el-col :span="8">
            <el-cascader :options="tactics" v-model="addForm.tactics" :props="defaultProps" :change-on-select="true" :show-all-levels="false">
            </el-cascader>
          </el-col>
          <el-col :span="2" style="margin-left: 30px">
            分数：
          </el-col>
          <el-col :span="4" style="margin-left: 0px">
            <el-input v-model="addForm.point"></el-input>
          </el-col>
        </el-form-item>
        <section v-if="addForm.type === 'editable'">
          <el-form-item label="提示：">
            <el-input v-model="addForm.placeholder"></el-input>
          </el-form-item>
        </section>
        <el-form-item>
          <el-button type="primary" @click="btnAddOption">添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="编辑选项" :visible.sync="showEditOption">
      <el-form v-if="editForm" label-width="60px" size="mini">
        <el-form-item label="类型">
          <el-radio-group v-model="editForm.type">
            <el-radio label="normal">普通</el-radio>
            <el-radio label="editable">可编辑</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选项：">
          <el-input v-model="editForm.text"></el-input>
        </el-form-item>
        <el-form-item label="策略：" v-if="tactics">
          <el-col :span="8">
            <el-cascader :options="tactics" v-model="editForm.tactics" :props="defaultProps" :change-on-select="true" :show-all-levels="false">
            </el-cascader>
          </el-col>
          <el-col :span="2" style="margin-left: 30px">
            分数：
          </el-col>
          <el-col :span="4" style="margin-left: 0px">
            <el-input v-model="editForm.point"></el-input>
          </el-col>
        </el-form-item>
        <section v-if="editForm.type === 'editable'">
          <el-form-item label="提示：">
            <el-input v-model="editForm.placeholder"></el-input>
          </el-form-item>
        </section>
        <el-form-item>
          <el-button type="primary" @click="btnEditOption">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="新建关联问卷" :visible.sync="showRefQuestion">
      <qa-creation-toolbar v-on:newSection="newRefSection"></qa-creation-toolbar>
    </el-dialog>
  </div>
</template>

<script>

  import EditOptionControl from "./optionControl";
  import QaCreationToolbar from "../CreationToolbar";
  import EditCommonModule from "./commonModule";

  export default {
    components: {
      EditCommonModule,
      QaCreationToolbar,
      EditOptionControl
    },
    name: "edit-i-radio",
    props: ['page', 'question','tactics'],
    watch:{
      checkedValue:function (nv,ov) {
        if(this.question.refs) {
          let ref = this.findRef(nv)
          if(ref)
            this.selRef = ref.refs
          else
            this.selRef = []
        }else
          this.selRef = []
      }
    },
    computed:{
      refQuestions(){
        let refQs = this.page.sections.filter(s=>{
          //查找被应用的对象
          return !!s.isRef
        })
        if(!refQs) refQs = []
        //console.log(refQs)
        return refQs
      }
    },
    data() {
      return {
        headerCellStyle:{padding:0},
        showAddOption: false,
        showEditOption:false,
        showRefQuestion:false,
        addForm:null,
        editForm:null,
        checkedValue:null,
        selRef:[],
        defaultProps:{
          children: 'childrens',
          label: 'name',
          value:'id'}
      }
    },
    created(){
      console.log(this.tactics)
    },
    methods: {
      onSubmit() {
        this.$emit('edit', this.question)
      },
      showAddDialog() {
        console.log('------btn------')
        this.showAddOption=true
        if (!this.question.keyIndex)
          this.question.keyIndex = 1
        this.addForm = {
          text: "选项" + this.question.keyIndex,
          key: this.question.key + '-' + this.question.keyIndex,
          type: "normal",
        }
        // this.question.push(tmpOption)
      },
      showCreateRefSection(){
        this.showRefQuestion = true
      },
      btnAddOption(){
        this.question.options.push({...this.addForm})
        this.showAddOption = false
        this.addForm = null
        this.question.keyIndex++//只有添加后才增加这个值
        //偷偷看一下
        console.log(this.question.options)
      },
      btnEditOption(){
        //let option = this.question.options.find(o=>o.key === this.)
        this.showEditOption=false
        this.editForm = null
      },
      btnDeleteRef(index){
        this.question.refs.splice(index,1)
      },
      //添加一个关联
      btnAddRef(){
        //判断是否有选中
        if(this.selRef == null || this.selRef.length===0){
          this.$message({type:'error',message:'没有选中任何关联问题'})
          return
        }
        //看下question里是否有关联
        if(!this.question.refs) this.question.refs=[]
        //判断是否存在
        let option = this.findRef(this.checkedValue)
        if(option){
          this.$message({type:'error',message:'相同的选项已经存在，请先删除'})
        }else {
          this.question.refs.push({ option: this.checkedValue, refs: this.selRef })
          this.$forceUpdate()//不晓得为什么需要这个
        }
      },
      findRef(cv){
        return this.question.refs.find(ref=>ref.option === cv)
      },
      //联动方法
      newRefSection(params){
        //修改下topic
        let selOption = this.question.options.find(o=>o.key===this.checkedValue)//查询选中的 选项
        params.topic = selOption.text + '- 关联问题'
        //这是个应用的section
        this.$emit('newRefSection',{isRef:true,...params})
        this.showRefQuestion=false
      },
      editOption(option){
        this.editForm = this.question.options.find(o=>o.key===option.key)
        this.showEditOption=true
      },
      moveOption(payload){
        //找到索引
        let index = this.question.options.findIndex(o=>o.key === payload.option.key)
        if(payload.direction === 'up'){
          if(index <= 0 ) return
          this.moveItem(this.question.options,index,index-1)
        }else{
          if(index >= this.question.options.length-1 ) return
          this.moveItem(this.question.options,index,index+1)
        }
      },
      removeOption(option){
        let index = this.question.options.findIndex(o=>o.key===option.key)
        if(index>=0)
          this.question.options.splice(index,1)
      },
      moveItem(arr,index1,index2){
        arr[index1] = arr.splice(index2, 1, arr[index1])[0];
        return arr;
      }
    }
  }
</script>

<style lang="scss">

</style>
